<template>
    <div>
        <!-- <h1>住房信息录入</h1> -->
         <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/management' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>住房管理</el-breadcrumb-item>
            <el-breadcrumb-item>基本信息录入</el-breadcrumb-item>
        </el-breadcrumb>
        
        <el-card>
            <el-form ref="houseFormRefs" :model="houseForm" label-width="150px" :rules="houseFormRules">
                <el-col :span="12">
                    <h1>基本信息</h1>
                    <el-col :span="20">
                        <el-form-item label="校区名称" prop="campusId">
                            <el-select v-model="houseForm.campusId" placeholder="请选择校区名称">
                                <el-option value="1" label="北区"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="楼栋名称" prop="buildId">
                            <el-select v-model="houseForm.buildId" placeholder="请选择楼栋名称">
                                <el-option value="1" label="北区"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="楼层名称" prop="floorId">
                            <el-select v-model="houseForm.floorId" placeholder="请选择楼层名称">
                                <el-option value="1" label="北区"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="状态" prop="houseState">
                            <el-select v-model="houseForm.houseState " placeholder="请选择空闲状态">
                                <el-option label="空闲" value="是"></el-option>
                                <el-option label="使用中" value="否"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="租金" prop="houseRent">
                            <el-input placeholder="租金" v-model="houseForm.houseRent"></el-input>
                        </el-form-item>
                        <el-form-item label="性质" prop="houseType">
                            <el-input placeholder="性质" v-model="houseForm.houseType"></el-input>
                        </el-form-item>
                        <el-form-item label="房间名称" prop="houseName">
                            <el-input placeholder="请输入房间名称" v-model="houseForm.houseName"></el-input>
                        </el-form-item>
                        <el-form-item label="面积" prop="houseArea">
                            <el-input placeholder="面积" v-model="houseForm.houseArea"></el-input>
                        </el-form-item>
                        <el-form-item label="户型" prop="houseHuXing">
                            <el-input placeholder="户型" v-model="houseForm.houseHuXing"></el-input>
                        </el-form-item>
                        <el-form-item label="结构" prop="houseStructure">
                            <el-input placeholder="结构" v-model="houseForm.houseStructure"></el-input>
                        </el-form-item>
                        <el-form-item label="朝向" prop="houseOrientation">
                            <el-input placeholder="朝向" v-model="houseForm.houseOrientation"></el-input>
                        </el-form-item>
                    </el-col>
                </el-col>
                <el-col :span="12">
                    <h1>添加房间设备信息</h1>
                    <el-col :span="20">
                        <el-form-item>
                            <el-upload
                                :action="actionUrl"
                                :on-remove="onImgRemove"
                                multiple
                                list-type="picture"
                                :file-list="fileList">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="info">重置</el-button>
                            <el-button type="primary" @click="submitHouseForm">添加</el-button>
                        </el-form-item>
                    </el-col>
                </el-col>
            </el-form>
        </el-card>
    </div>
</template>
<script>
export default {
    data(){
        return{
            fileList:[],
            actionUrl:'',
            // 需要提交的住房信息表单
            houseForm:{
                // campusId:'',
                // buildId:'',
                // floorId:'',
                // houseName:'',
                // houseState:'',
                // houseRent:'',
                // houseType:'',
                // houseArea:'',
                // houseHuXing:'',
                // houseStructure:'',
                // houseOrientation:'',
                // username :'admin',
                campusId:1,
                buildId:1,
                floorId:2,
                houseState:'是',
                houseRent:300,
                houseType:1,
                username :'admin',
            },
            model:{},
            // 表单提交验证规则
            houseFormRules:{
                campusId:[
                    {required: true, message:'请选择校区', trigger: 'blur'}
                ],
                buildId:[
                    {required: true, message:'请输入', trigger: 'blur'}
                ],
                floorId:[
                    {required: true, message:'请输入', trigger: 'blur'}
                ],
                houseType:[
                    {required: true, message:'请输入', trigger: 'blur'}
                ], 
                houseState:[
                    {required: true, message:'请输入', trigger: 'blur'}
                ],
                houseRent:[
                    {required: true, message:'请输入', trigger: 'blur'}
                ],
                houseName:[
                    {required: true, message:'请输入', trigger: 'blur'}
                ]
            }
        }
    },
    created(){
        this.onImgRemove();
    },
    methods: {
        //  http://120.78.198.135:8084/house/addHouse?buildId=1&campusId=1&floorId=1&houseRent=700&houseState=%E6%98%AF&houseType=1&username=admin
        // 提交住房信息        
        async submitHouseForm(){
            await this.$http.put('house/addHouse?buildId=1&campusId=1&floorId=1&houseRent=700&houseState=是&houseType=1&username=admin').then(res=>{
                // await this.$http.put('house/addHouse',this.houseForm).then(res=>{})
                    
               
            console.log(res);
            if(res.data.code !==1){
                this.$message.error('错误');
            }
            }).catch((err)=>{
                console.log(err);
            })
        
        
        // console.log(formData);
        // await this.$http.put('house/addHouse',formData).then(res=>{
        //     if(res.data.code ==1){
        //         console.log(res);
        //         this.$message({
        //             message:'提交成功',
        //             type:'success',
        //             center:true,
        //         })
        //     }else{
        //         this.$message({
        //             message:'提交错误！',
        //             type:'error'
        //         })
        //     }
        // })
        //   const res = await this.$http.put(`house/addHouse?&${this.houseForm.campusId}&${this.houseForm.buildId}&${this.houseForm.floorId}&${this.houseForm.houseType}&${this.houseForm.houseState}&${this.houseForm.houseRent}&${this.houseForm.houseName}`); 
        //   console.log(res);
        
           // let houseForm = this.houseForm;
        // let formData = new FormData();
        
        // formData.append('campusId',houseForm.campusId);
        // formData.append('houseState',houseForm.houseState);
        // formData.append('buildId',houseForm.buildId);
        // formData.append('floorId',houseForm.floorId);
        // formData.append('houseType',houseForm.houseType);
        // formData.append('houseRent',houseForm.houseRent);
        // formData.append('houseArea',houseForm.houseArea);
        // formData.append('houseHuXing',houseForm.houseHuXing);
        // formData.append('houseStructure',houseForm.houseStructure);
        // formData.append('houseOrientation',houseForm.houseOrientation);
        // formData.append('username',houseForm.username);
        // formData.append('houseName',houseForm.houseName);
          
        },
        // 图片移除
        onImgRemove(){
            // console.log(this.fileList);
        }
    },
}
</script>
<style scoped>
    h1{
        margin-left: 100px;
        font-family: Adobe Heiti Std;
        font-size: 15px;
        font-weight: bolder;
        color: #4994fb;
    }
    .el-select{
        width: 100%;
    }
</style>
